<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>添加消息</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
</head>
<body>
    <div>
        <table>
            <tr>
                <td>标题</td>
                <td><input name="title" id="title" type="text"></td>
            </tr>
            <tr>
                <td>内容</td>
                <td><input name="content" id="content" type="text"></td>
            </tr>
            <tr>
                <td>选择联系人</td>
                <td>
                    <!--thymeleaf 遍历用户信息-->
                    <ul>
                        <li th:each="user,userStat : ${list}">
                            <label th:for="${userStat.index}" th:text="${userStat.index}+1"></label>
                            <input type="checkbox" th:value="${user.id}" th:id="${userStat.index}" th:text="${user.userName}">
                        </li>
                    </ul>
                </td>
            </tr>
            <tr>
                <td>
                    <input id="button" type="button" value="发送">
                </td>
            </tr>
        </table>
    </div>
</body>
<script>
    $("#button").on('click',function () {
        var userIds = [];
        var title = $("#title").val();
        console.log(title);
        var content = $("#content").val();
        $("input[type='checkbox']:checked").each(function () {
            var _this = $(this);
            userIds.push(_this.val());
        });
        $.ajax({
            url:"/websocketserver/haha/add",
            data:{
                'content':content,
                'title': title,
                'userIds':userIds
            },
            method:'post',
            dataType:'json',
            traditional:true,
            success:function (data) {
                console.log(data);
            }
        })
    });
</script>
</html>